<template >
    <div class="sdy-footer">
        <van-tabbar route >
        <van-tabbar-item
            v-for="item in barList"
            :key="item.id"
            :to="item.to"
            :icon="item.icon">
            {{ item.title }}
        </van-tabbar-item>
        
    </van-tabbar>
    </div>
</template>

<script setup lang="ts">
// 定义一个数组，循环生成底部导航栏
// 倒入借口限制
import type { MyBarItem } from '@/config/interface'
    const barList: MyBarItem[] = [
        { id: 1, to: '/home', icon: 'home-o', title: '首页'},
        { id: 2, to: '/cate', icon: 'apps-o', title: '分类'},
        { id: 3, to: '/cart', icon: 'cart-o', title: '购物车'},
        { id: 4, to: '/self', icon: 'user-o', title: '我的'}
    ]
</script>

<style scoped lang="scss"></style>